<template>
  <div class="smallRoutineMainPage">
    <div class="title">
      <h3>小程序首页设置</h3>
    </div>
    <div class="ele-content">
      <div class="left ele-main">
        <div class="mainBackGround">
          <el-radio-group v-model="model">
            <el-radio-button class="carouselSetting" label="0">&nbsp;</el-radio-button>
            <el-radio-button class="usp" label="1">&nbsp;</el-radio-button>
            <el-radio-button class="hotRent" label="2">&nbsp;</el-radio-button>
            <el-radio-button class="hotRentGoods" label="3">&nbsp;</el-radio-button>
            <el-radio-button class="hotSale" label="4">&nbsp;</el-radio-button>
            <el-radio-button class="hotSaleGoods" label="5">&nbsp;</el-radio-button>
            <div class="themeGroup">
              <div class="left theme-content">
                <el-radio-button class="theme_one" label="6">&nbsp;</el-radio-button>
              </div>
              <div class="right theme-content">
                <el-radio-button class="theme_two" label="7">&nbsp;</el-radio-button>
                <el-radio-button class="theme_three" label="8">&nbsp;</el-radio-button>
              </div>
            </div>
          </el-radio-group>
        </div>
      </div>
      <div class="right ele-main">
        <div class="right-content">
          <CarouselSetting v-if="model == '0'" ref="CarouselSetting" />
          <HotSaleSetting v-if="model == '1'" ref="HotSaleSetting" />
          <RentImgSetting v-if="model == '2'" ref="RentImgSetting" />
          <RentGoodsSetting v-if="model == '3'" ref="RentGoodsSetting" />
          <SaleImgSetting v-if="model == '4'" ref="SaleImgSetting" />
          <SaleGoodsSetting v-if="model == '5'" ref="SaleGoodsSetting" />
          <FirstTopicSetting v-if="model == '6'" ref="FirstTopicSetting" />
          <SecondTopicSetting v-if="model == '7'" ref="SecondTopSetting" />
          <ThirdTopicSetting v-if="model == '8'" ref="ThirdTopicSetting" />
        </div>
        <div class="footer">
          <el-button type="primary" class="rightButton" @click="submitByModel">提交</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/** 小程序首页设置 */
import { getToken } from '@/utils/auth'
import CarouselSetting from '@/views/shop/component/CarouselSetting'
import HotSaleSetting from '@/views/shop/component/HotSaleSetting'
import SaleImgSetting from '@/views/shop/component/SaleImgSetting'
import SaleGoodsSetting from '@/views/shop/component/SaleGoodsSetting'
import RentImgSetting from '@/views/shop/component/RentImgSetting'
import RentGoodsSetting from '@/views/shop/component/RentGoodsSetting'
import FirstTopicSetting from '@/views/shop/component/FirstTopicSetting'
import SecondTopicSetting from '@/views/shop/component/SecondTopicSetting'
import ThirdTopicSetting from '@/views/shop/component/ThirdTopicSetting'
export default {
  name: 'SmallRoutineMainPage',
  components: {
    CarouselSetting,
    HotSaleSetting,
    SaleImgSetting,
    SaleGoodsSetting,
    RentImgSetting,
    RentGoodsSetting,
    FirstTopicSetting,
    SecondTopicSetting,
    ThirdTopicSetting
  },
  data() {
    return {
      model: '0'
    }
  },
  computed: {
    /* 请求头部信息*/
    headers() {
      return {
        'X-Litemall-Admin-Token': getToken()
      }
    }
  },
  watch: {
    model: {
      handler(newValue, oldValue) {
        switch (this.model) {
          case '0': {
            this.$nextTick(() => {
              this.$refs.CarouselSetting.setModel(this.model)
            })
            break
          }
          case '1': {
            this.$nextTick(() => {
              this.$refs.HotSaleSetting.setModel(this.model)
            })
            break
          }
          case '2': {
            this.$nextTick(() => {
              this.$refs.RentImgSetting.setModel(this.model)
            })
            break
          }
          case '3': {
            this.$nextTick(() => {
              this.$refs.RentGoodsSetting.setModel(this.model)
            })
            break
          }
          case '4': {
            this.$nextTick(() => {
              this.$refs.SaleImgSetting.setModel(this.model)
            })
            break
          }
          case '5': {
            this.$nextTick(() => {
              this.$refs.SaleGoodsSetting.setModel(this.model)
            })
            break
          }
          case '6': {
            this.$nextTick(() => {
              this.$refs.FirstTopicSetting.setModel(this.model)
            })
            break
          }
          case '7': {
            this.$nextTick(() => {
              this.$refs.SecondTopSetting.setModel(this.model)
            })
            break
          }
          case '8': {
            this.$nextTick(() => {
              this.$refs.ThirdTopicSetting.setModel(this.model)
            })
            break
          }
        }
      }
    }
  },
  created() {

  },
  mounted() {
    if (this.model == '0') {
      this.$nextTick(() => {
        this.$refs.CarouselSetting.setModel(this.model)
      })
    }
  },
  methods: {
    submitByModel() {
      switch (this.model) {
        case '0' : {
          this.$refs.CarouselSetting.submitCarousel()
          break
        }
        case '1' : {
          this.$refs.HotSaleSetting.submitSalePoint()
          break
        }
        case '2': {
          this.$nextTick(() => {
            this.$refs.RentImgSetting.submitRentImg()
          })
          break
        }
        case '3': {
          this.$nextTick(() => {
            this.$refs.RentGoodsSetting.submitRentGoods()
          })
          break
        }
        case '4': {
          this.$nextTick(() => {
            this.$refs.SaleImgSetting.submitSaleImg()
          })
          break
        }
        case '5': {
          this.$nextTick(() => {
            this.$refs.SaleGoodsSetting.submitSaleGoods()
          })
          break
        }
        case '6': {
          this.$nextTick(() => {
            this.$refs.FirstTopicSetting.submitFirstTopic()
          })
          break
        }
        case '7': {
          this.$nextTick(() => {
            this.$refs.SecondTopSetting.submitSecondTopic()
          })
          break
        }
        case '8': {
          this.$nextTick(() => {
            this.$refs.ThirdTopicSetting.submitThirdTopic()
          })
          break
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.smallRoutineMainPage {
  min-width: 1700px;
  padding: 50px 100px;
  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    ::v-deep .el-button {
      height: 36px;
    }
  }
  .ele-content {
    display: flex;
    justify-content: space-between;
    .ele-main {
      border: 1px solid #F3F3F3;
      border-radius: 5px;
      padding: 20px;
      height: 700px;
      overflow: auto;
      .mainBackGround {
        width: 375px;
        height: 1932px;
        background: url("../../img/smallRoutineMain.jpg") no-repeat;
        background-size: contain;
        padding-left: 10px;
        .carouselSetting {
          width: 356px;
          height: 126px;
          margin-top: 164px;
          ::v-deep .el-radio-button__orig-radio {
            width: 356px;
            height: 126px;
          }
          ::v-deep .el-radio-button__inner {
            width: 100%;
            height: 100%;
            background: none;
            border-radius: 7px;
          }
        }
        .usp {
          width: 356px;
          height: 40px;
          ::v-deep .el-radio-button__orig-radio {
            width: 356px;
            height: 40px;
          }
          ::v-deep .el-radio-button__inner {
            width: 100%;
            height: 100%;
            background: none;
            border-radius: 7px;
          }
        }
        .hotRent {
          width: 356px;
          height: 90px;
          ::v-deep .el-radio-button__orig-radio {
            width: 356px;
            height: 90px;
          }
          ::v-deep .el-radio-button__inner {
            width: 100%;
            height: 100%;
            background: none;
            border-radius: 7px;
          }
        }
        .hotRentGoods {
          width: 356px;
          height: 194px;
          ::v-deep .el-radio-button__orig-radio {
            width: 356px;
            height: 194px;
          }
          ::v-deep .el-radio-button__inner {
            width: 100%;
            height: 100%;
            background: none;
            border-radius: 7px;
          }
        }
        .hotSale {
          margin-top: 9px;
          width: 356px;
          height: 90px;
          ::v-deep .el-radio-button__orig-radio {
            width: 356px;
            height: 90px;
          }
          ::v-deep .el-radio-button__inner {
            width: 100%;
            height: 100%;
            background: none;
            border-radius: 7px;
          }
        }
        .hotSaleGoods {
          width: 356px;
          height: 194px;
          ::v-deep .el-radio-button__orig-radio {
            width: 356px;
            height: 194px;
          }
          ::v-deep .el-radio-button__inner {
            width: 100%;
            height: 100%;
            background: none;
            border-radius: 7px;
          }
        }
        .themeGroup {
          width: 356px;
          height: 260px;
          display: flex;
          justify-content: space-between;
          .theme-content {
            width: 172px;
            height: 260px;
            margin-top: 18px;
            .theme_one {
              width: 174px;
              height: 260px;
              ::v-deep .el-radio-button__orig-radio {
                width: 170px;
                height: 260px;
              }
              ::v-deep .el-radio-button__inner {
                width: 100%;
                height: 100%;
                background: none;
                border-radius: 7px;
              }
            }
            .theme_two {
              width: 170px;
              height: 122px;
              ::v-deep .el-radio-button__orig-radio {
                width: 170px;
                height: 122px;
              }
              ::v-deep .el-radio-button__inner {
                width: 100%;
                height: 100%;
                background: none;
                border-radius: 7px;
              }
            }
            .theme_three {
              width: 170px;
              height: 132px;
              ::v-deep .el-radio-button__orig-radio {
                width: 170px;
                height: 132px;
              }
              ::v-deep .el-radio-button__inner {
                width: 100%;
                height: 100%;
                background: none;
                border-radius: 7px;
              }
            }
          }
          .right.theme-content  {
            width: 174px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
          }
        }
      }
    }
    .ele-main.left {
      width: 30%;
    }
    .ele-main.right {
      width: 65%;
      height: 800px;
      .right-content {
        height: 700px;
        overflow: auto;
      }
      .footer {
        width: 100%;
        margin-top: 10px;
        .rightButton {
          display: block;
          width: 200px;
          margin: 0 auto;
        }
      }
    }
  }
}
</style>
